<template>
  <view class="container">
    <view class="header">
      <view class="header-user">
        <image :src="baseUrl + userInfo.image || '/static/images/Ellipse66@2x.png'" mode=""></image>
        <view class="user-info">
          <text>{{userInfo.nickName}}</text>
          <text>{{userInfo.phone}}</text>
        </view>
      </view>
    </view>
    <view class="gui-list gui-margin-top gui-padding-x gui-bg-white">

      <!-- <view class="gui-list-items" @click="gotoContactHistory">
        <image class="left-icon" src="/static/images/Group48097757@2x.png" mode=""></image>
        <view class="gui-list-body gui-border-b">
          <view class="gui-list-title">
            <text class="gui-list-title-text">联系记录</text>
          </view>
        </view>
        <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
      </view> -->
      <view class="gui-list-items" @click="gotoAccountDetail">
        <image class="left-icon" src="/static/images/Group48097536@2x.png" mode=""></image>
        <view class="gui-list-body gui-border-b">
          <view class="gui-list-title">
            <text class="gui-list-title-text">账单明细</text>
          </view>
        </view>
        <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
      </view>

      <view class="gui-list-items" @click="gotoClient">
        <image class="left-icon" src="/static/images/Group48097536@2x.png" mode=""></image>
        <view class="gui-list-body gui-border-b">
          <view class="gui-list-title">
            <text class="gui-list-title-text">用户端</text>
          </view>
        </view>
        <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
      </view>
    </view>
    <view class="footer">
      <tabbar :index="2"></tabbar>
    </view>
  </view>
</template>
<script>
  import graceJS from '@/Grace6/js/grace.js';
  export default {
    data() {
      return {
        baseUrl: uni.gRequest.file,
        userInfo: {}
      }
    },
    onShow() {
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        this.userInfo = uni.getStorageSync('userInfo')
      },
      async gotoClient() {
        const res = await uni.gRequest.post('/app/user/edit', {
          userClass: 1
        })
        uni.switchTab({
          url: "/pages/switchPages/user"
        })
      },
      gotoAccountDetail() {
        uni.navigateTo({
          url: "/pages/AccountDetail/AccountDetail?type=2"
        })
      },
      gotoContactHistory() {
        uni.navigateTo({
          url: "/pages/ContactHistory/ContactHistory?isClient" + this.isClient
        })
      },

    },

  }
</script>
<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .left-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .container {
    width: 100%;
  }

  .header {
    height: 414rpx;
    // background: #347DFD;
    background: #fe7f08 url('/static/images/Snipaste.png') no-repeat center/100% 100%;
    position: relative;

    .header-user {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 120rpx;
      left: 20rpx;

      image {
        border-radius: 50%;
        width: 140rpx;
        height: 140rpx;
      }

      .user-info {
        margin-left: 16rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
        color: white;
        font-size: 30rpx;

        text:first-child {
          font-size: 48rpx;
          margin-bottom: 14rpx;
        }
      }
    }
  }
</style>
